<template>
    <div>
        <el-dialog
            :visible.sync="show"
            :before-close="handleClose"
            title="添加课程"
            width="70%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div class="edu-page-warp">
                <div class="edu-page-title">{{ $t('common.text.filterCondition') }}</div>
                <el-row :gutter="24">
                    <el-col>
                        <el-form
                            :model="queryCourseForm"
                            size="mini"
                            label-position="right"
                            label-width="80px"
                        >
                            <el-row :gutter="24">
                                <el-col :span="10" style="padding-left:20px">
                                    <el-form-item label="开课学院:" prop="college">
                                        <DictSelect
                                            v-model="queryCourseForm.college"
                                            :data="options.college"
                                            @change="onSubmit"
                                        ></DictSelect>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10" :offset="1">
                                    <el-form-item label="课程代码:" prop="code">
                                        <el-input
                                            v-model="queryCourseForm.codeStr"
                                            placeholder="请输入-多个请用英文逗号分隔"
                                            suffix-icon="el-icon-search"
                                            clearable
                                            @clear="onSubmit"
                                            @keyup.enter.native="onSubmit"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="edu-page-title">添加默认值</div>
                <el-row>
                    <el-col style="padding-left:20px">
                        <el-form
                            :model="queryCourseForm"
                            size="mini"
                            label-position="right"
                            label-width="65px"
                            inline
                        >
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="考核方式:">
                                        <el-radio v-model="examMode" label="考试">考试</el-radio>
                                        <el-radio
                                            v-model="examMode"
                                            label="考查"
                                            style="margin-left:8px;"
                                        >考查</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="课程区分:">
                                        <el-radio v-model="weeksType" label="0">教学周</el-radio>
                                        <el-radio
                                            v-model="weeksType"
                                            label="1"
                                            style="margin-left:8px;"
                                        >实践周</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="是否必修:">
                                        <el-radio v-model="compulsory" label="1">是</el-radio>
                                        <el-radio
                                            v-model="compulsory"
                                            label="0"
                                            style="margin-left:8px;"
                                        >否</el-radio>
                                    </el-form-item>
                                </el-col>
                                 <el-col :span="6">
                                    <el-form-item label="学期:">
                                        <el-select v-model="semesters" multiple :placeholder="请选择" collapse-tags>
                                            <el-option
                                                v-for="item in options.schoolTerm"
                                                :key="item.key"
                                                :label="item.label"
                                                :value="item.key">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-table :data="courses" size="mini" @selection-change="chooseCourse">
                            <el-table-column type="selection" width="55" />
                            <el-table-column width="120" label="课程编码" prop="code" />
                            <el-table-column label="课程名称">
                                <template slot-scope="props">
                                    <el-tooltip
                                        :content="props.row.name"
                                        placement="bottom"
                                        effect="light"
                                    >
                                        <span>{{props.row.name}}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="课程名称（英文）" width="135">
                                <template slot-scope="props">
                                    <el-tooltip
                                        :content="props.row.nameEn"
                                        placement="bottom"
                                        effect="light"
                                    >
                                        <span>{{props.row.nameEn }}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="开课学院">
                                <template slot-scope="props">
                                    <el-tooltip
                                        :content="props.row.name"
                                        placement="bottom"
                                        effect="light"
                                    >
                                        <span>{{props.row.collegeI18n}}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="课程区分" width="100">
                                <template slot-scope="props">
                                    <el-select v-model="props.row.weeksType">
                                        <el-option key="0" label="教学周" value="0"></el-option>
                                        <el-option key="1" label="实践周" value="1"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="考核方式" width="90">
                                <template slot-scope="props">
                                    <el-select v-model="props.row.examMode">
                                        <el-option key="考试" label="考试" value="考试"></el-option>
                                        <el-option key="考查" label="考查" value="考查"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="是否必修" width="90">
                                <template slot-scope="props">
                                    <el-select v-model="props.row.compulsory">
                                        <el-option key="1" label="是" value="1"></el-option>
                                        <el-option key="0" label="否" value="0"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="学期" width="160">
                                <template slot-scope="props">
                                   <el-select v-model="props.row.semesters" multiple collapse-tags>
                                        <el-option
                                            v-for="item in options.schoolTerm"
                                            :key="item.key"
                                            :label="item.label"
                                            :value="item.key">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="学分" width="60">
                                <template slot-scope="props">{{ props.row.credits }}</template>
                            </el-table-column>
                            <el-table-column label="学时" width="60">
                                <template slot-scope="props">{{ props.row.period }}</template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-pagination
                            :current-page="queryCourseForm.pageNum_"
                            :page-size="queryCourseForm.pageSize_"
                            :total="queryCourseForm.total_"
                            layout="total,  prev, pager, next, jumper"
                            style="float:right;margin-top:4px"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </el-col>
                </el-row>
            </div>
            <span slot="footer">
                <div>
                    <el-button @click="closeDialog">{{ $t('message.cancel') }}</el-button>
                    <el-button type="primary" @click="confirmCourse">{{ $t('message.confirm') }}</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getCourseListNew, getFacultys } from "common/src/api/culture/bachelor";
import { queryDic } from "common/src/api/dictionary";
import { findFaculty } from "common/src/api/faculty";
import Bus from "common/src/utils/bus";
export default {
    props: {
        show: {
            default: false, // 1为模板，2为方案
            type: Boolean
        },
        randomId: {
            default: 0,
            type: Number
        },
        isElective: {
            default: "",
            type: String
        }
    },
    data() {
        return {
            queryCourseForm: {
                condition: "",
                codeStr: "",
                pageSize_: 10,
                pageNum_: 1,
                total_: 0,
                college: "",
                status: 3
            },
            options: {
                examMode: [],
                college: [],
                compulsorys: [
                    { label: "是", value: 1 },
                    { label: "否", value: 0 }
                ],
                schoolTerm: []
            },
            courses: [],
            checkedCourses: [], // 选择的课程
            examMode: "考查",
            weeksType: "0",
            compulsory: "1",
            semesters: []
        };
    },
    methods: {
        // 获取开课学院
        getFacultys() {
            getFacultys().then(res => {
                if (res.code == 200) {
                    res.data.splice(
                        res.data.findIndex(c => c.deptCode == "-10000"),
                        1
                    );
                    this.options.college = res.data;
                    this.options.college.forEach(c => {
                        c.value = c.deptCode;
                        c.label =
                            "en" == this.$store.getters.language
                                ? c.deptNameEn
                                : c.deptName;
                    });
                }
            });
        },
        // 获取课程列表
        getCourses(isFirstPage = false) {
            if (isFirstPage) {
                this.queryCourseForm.pageNum_ = 1;
            }
            this.queryCourseForm.isElective = this.isElective;
            this.queryCourseForm.templateId = this.$route.query.templateId;
            getCourseListNew(this.queryCourseForm)
                .then(response => {
                    if (response.code == 200) {
                        response.data.list.forEach(row => {
                            row.examMode = this.examMode;
                            row.compulsory = this.compulsory;
                            row.weeksType = this.weeksType;
                            row.semesters = this.semesters;
                        });
                        this.courses = response.data.list;
                        this.queryCourseForm.total_ = response.data.total_;
                    }
                })
                .catch(e => {
                    this.$message({
                        type: "error",
                        message: "查询课程列表失败"
                    });
                });
        },
        // 课程查询
        onSubmit() {
            this.getCourses(true);
            this.getFacultys();
            this.options.schoolTerm = this.$attrs.schoolTerm || []
        },
        // 课程查询翻页
        handleCurrentChange(val) {
            this.queryCourseForm.pageNum_ = val;
            this.getCourses();
        },
        // 课程查询页显示数量
        handleSizeChange(val) {
            this.queryCourseForm.pageSize_ = val;
            this.getCourses(true);
        },
        // 确定课程
        confirmCourse() {
            if (this.checkedCourses.length === 0) {
                this.$message({
                    type: "info",
                    message: "请选择一门课程"
                });
                return;
            }
            const data = {
                item: this.checkedCourses,
                weeksType: this.weeksType,
                examMode: this.examMode,
                compulsory: this.compulsory,
                semesters: this.semesters.join()
            };
            Bus.$emit(this.randomId, false, true, data);
            this.clean();
        },
        chooseCourse(val) {
            this.checkedCourses = val;
        },
        handleClose(done) {
            Bus.$emit(this.randomId, false, true);
            done();
            this.clean();
        },
        closeDialog() {
            Bus.$emit(this.randomId, false, true);
            this.clean();
        },
        clean() {
            Object.assign(this.$data, this.$options.data.call(this));
        },
        updateCourses(type, value) {
            if (!type || !value) return;
            this.courses.forEach(row => {
                row[type] = value;
            });
        }
    },
    watch: {
        examMode(n, o) {
            if (n) {
                this.updateCourses("examMode", n);
            }
        },
        weeksType(n, o) {
            if (n) {
                this.updateCourses("weeksType", n);
            }
        },
        compulsory(n, o) {
            if (n) {
                this.updateCourses("compulsory", n);
            }
        },
        'semesters.length'(n, o) {
            this.updateCourses("semesters", this.semesters);
        }
    }
};
</script>
